<#import "/spring.ftl" as spring />

<#include "/tags/userNotification.ftl">
<#include "/tags/famousQuote.ftl">
<#include "/tags/userCompleteness.ftl">
<#include "/tags/userIntroTag.ftl">
<#include "/tags/friendList.ftl">
<#include "/tags/allFriendTag.ftl">
<#include "/tags/friendHintTag.ftl">
﻿<#include "/tags/goalProcessTag.ftl">
<#include "/tags/goalEntryTag.ftl">
<#include "/tags/goalCloudTag.ftl">
<#include "/tags/updatedSinceTag.ftl">
<#include "/tags/DDMMYYYY.ftl">
<#include "/tags/likeTag.ftl">
<#include "/tags/entryAvatar.ftl">
<#include "/tags/topGoalsTag.ftl">
<#include "/tags/commonGoalsTag.ftl">
<#include "/tags/confirmBox.ftl">
<#include "/tags/editEntryTag.ftl">
<#include "/tags/commentTag.ftl">
<#include "/tags/commentBoxTag.ftl">
<#include "/tags/userHowIDoneTag.ftl">

<head>	     	
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/style_dev.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/scripts/cleditor/jquery.cleditor.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/ui-lightness/jquery-ui-1.8.5.custom.css">
	<link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/tools/jquery.autocomplete.css">
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/cleditor/jquery.cleditor.min.js"></script>     
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.mouse.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.position.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.slider.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.autocomplete.js"></script>
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/page.userDashboard.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/goalProcess.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/editEntry.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/friendList.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/dwr/interface/GoalEntryManager.js"></script>
	
	<title>Chỉnh sửa ảnh đại diện</title>
	<style>
		#fancybox-outer{border:5px solid #333 !important;-moz-border-radius:10px;border-radius:10px;-webkit-border-radius:10px}
	</style>
	<script type="text/javascript">					
		jQuery(document).ready(function(){
			var jcrop_api;
			
			initJcrop();
			
			function getDefaultSelect() {
				var dim = jcrop_api.getBounds();
				return [ 100, 100, 50, 50];
			}
			
			function initJcrop(){			
				jcrop_api = jQuery.Jcrop('#jcrop_target',{
					onChange : showPreview,
					onSelect: showPreview,
					aspectRatio: 1/1			
				});
				
				jcrop_api.setSelect(getDefaultSelect());
			}
			
			function showPreview(coords)
			{
				if(isNaN(coords.w) || isNaN(coords.h) || coords.w == 0 || coords.h == 0)
					return;
					
				var rx = 120 / coords.w;
				var ry = 120 / coords.h;
				
				jQuery('#preview').css({
					width: Math.round(rx * ${avatarCommand.width}) + 'px',
					height: Math.round(ry * ${avatarCommand.height}) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
				
				updateData(coords);
			};
			
			function updateData(coords){
				jQuery("#x").val(coords.x);
				jQuery("#x1").val(coords.x1);
				jQuery("#y").val(coords.y);
				jQuery("#y1").val(coords.y1);
				jQuery("#width").val(coords.w);
				jQuery("#height").val(coords.h);
			}
			
		});		
		function submitForm(){
			jQuery("form#avatarForm").submit();
		}				
	</script>
</head>

<@userNotification />  
<div class="w3"></div>
<div id="infomation">
	<div id="left">      	
      	<div class="avatarEditor">
     		<span class="icon_1 uploadAvatarIcon"></span><h1>Thay đổi hình đại diện</h1>
         	<div class="clearthis"></div>
         	<h2>CHỈNH SỬA ẢNH ĐẠI DIỆN</h2>
         	<p>Click chuột và rê để chọn khu vực bạn muốn làm avatar</p>
         	<div class="beforeAvatar">
         		<img src="${avatarCommand.imagePath}" id="jcrop_target" alt="source" width="${avatarCommand.width}px" height="${avatarCommand.height}px"/>
         	</div>
	         <div class="afterAvatar">
	         	<div style="width:120px;height:120px;overflow:hidden;margin-left:5px;">
	         		<img id="preview" src="${avatarCommand.imagePath}" alt="preview"/>
	         	</div>
	         	<div class="preview">          		         		
	          		<p>Ảnh đại diện của bạn</p>
	          		<a href="javascript:submitForm()" class="icon_1 btnUploadAvatar" style="margin-left:10px">HOÀN THÀNH</a>
	         	</div>
         	</div>         	
      	</div>
      	<div style="display:none" id="submitForm">
	      	<form id="avatarForm" name="avatarCommand" method="POST" action="${rc.contextPath}/editAvatar.html">
	      		<@spring.formInput path="avatarCommand.imagePath"/>
	      		<@spring.formInput path="avatarCommand.x"/>
	      		<@spring.formInput path="avatarCommand.x1"/>
	      		<@spring.formInput path="avatarCommand.y"/>
	      		<@spring.formInput path="avatarCommand.y1"/>
	      		<@spring.formInput path="avatarCommand.height"/>
	      		<@spring.formInput path="avatarCommand.width"/>
	      	</form>
	   	</div>
    </div>
    
    <div id="right">
		<@userCompleteness />		
		<@userIntro/>
        <@topGoals />
        <@friendList username="${data.userInSession}" />
        <@allFriend />
        <@friendHint />
        
        <div class="w6"></div>
	    <div class="w3"></div>
        <div class="w6"></div>
	</div>	
</div>
